<html xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui">
    <f:view contentType="text/html">
        <h:head>
            <style type="text/css">
                * {
                    margin: 0;
                    padding: 0;
                }
                .ui-widget {
                    font-size: 80%;
                }
                .ui-widget input {
                    font-size: 120%;
                }
                .margin-top-text {
                    margin-top: 5px;
                    text-align: right;
                }
            </style>
            <title>
            </title>
            <!-- Latest compiled and minified CSS -->
            <h:outputStylesheet library="css" name="bootstrap.min.css" />
            <!-- Optional theme -->
            <h:outputStylesheet library="css" name="bootstrap-theme.min.css" />
            <!-- Latest compiled and minified JavaScript -->
            <script src="#{facesContext.externalContext.requestContextPath}/resources/js/bootstrap.min.js"></script>
            <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
        </h:head>
        <h:body style="background-image: url('resources/img/bg-index.jpg');background-position: 50% 0%;background-repeat: no-repeat">   
            
            <p:dialog id="dialog" visible="true" closable="false" draggable="true" resizable="false" width="900" widgetVar="dlg"
                      header="CnPosto">
                    
                        <h:form id="login" prependId="false" onsubmit="document.getElementById('login').action='j_spring_security_check';">
                                
                            <div style="float: left; display:block; margin: 10px 0 0 50px;">
                                <br/>
                                <p:messages/>
                                <h:panelGrid columns="2" cellpadding="3" style="font-weight: bold;">
                                        <h:outputLabel for="j_username" value="Usuário: *" />
                                        <p:inputText id="j_username" size="20" style="width: 180px;"/>

                                        <h:outputLabel class="margin-top-text" for="j_password" value="Senha: *" />
                                        <p:password id="j_password" size="18" style="width: 180px; margin-top: 3px;"/>
                                </h:panelGrid>

                                <h:outputText value="Usuário e/ou senha inválidos!" rendered="#{param.error}" 
                                    style="color:darkred; font-size: 14px; padding-bottom: 10px; margin: 0 0 0 55px"/>
                                <br/><br/>
                                <button id="login" type="submit" class="btn btn-default" style="margin:0 0 0 55px;">
                                    <span>Entrar</span>
                                </button>
                                <p:button styleClass="btn btn-default" style="margin-left: 5px; height: 34px;" outcome="cadastro" value="Cadastrar"/>
                            </div>
                            
                            <div style="float: right; width: 490px; display:block; margin: 10px 15px 0 0;">
                                <div class="panel panel-default">
                                    <div class="panel-body" style="text-align: justify;">
                                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
                                        sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
                                        magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
                                        quis nostrud exerci tation ullamcorper suscipit lobortis 
                                        nisl ut aliquip 
                                    </div>
                                </div>
                            </div>      
                                
                        </h:form>
                    
                </p:dialog>

        </h:body>
    </f:view>
</html>